<template>
  <!-- 发货单 -->
  <div>
    <!-- <FormPanel :list="formList" formType="add" :isSubmitBtn="false" /> -->
    <FilterTable
      ref="table"
      height="auto"
      columnsRef="position_common_shipped"
      :isSelectColumn="false"
      selectionType="single"
      :columns="columns"
      :onRowSelectChange="param => (this.selectedTableData = param)"
      :onColumnsChange="columns => (this.columns = columns)"
      :dataSource="dataSource"
      :isMemoryPagination="true"
    ></FilterTable>
    <!-- :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'" -->
    <div class="btnWrap">
      <el-button @click="handleCancle">关 闭</el-button>
      <!-- <el-button type="primary" @click="handleConfirm">确 定</el-button> -->
    </div>
  </div>
</template>

<script>
import { queryControlLocations } from '@/api/part/common';
import { notifyAction } from '@/utils';
import { getShippedItem, getInvoiceList } from '@/api/part/report/orderExecution';
export default {
  props: {
    // 初始化表单
    rowData: {
      type: Object,
      default: () => ({})
    },
    orderTypeData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      fetchApi: queryControlLocations,
      fetchParams: Object.assign({ xhrAbort: false }, this.params),
      columns: this.createTableColumns(),
      formList: this.createFormList(),
      tableData: [],
      selectedTableData: [], // 选中的数据
      dataSource: []
    };
  },
  created() {},
  mounted() {
    // this.initFormpanel();
    this.initSearch();
  },
  methods: {
    // 初始化表单
    initFormpanel() {
      // console.log(this.rowData, 123);
      this.formList.forEach(element => {
        element.initialValue = this.rowData[element.fieldName];
        if (element.fieldName == 'KUNNR|NAME1') {
          element.initialValue = [this.rowData.KUNNR, this.rowData.NAME1];
        }
        if (element.fieldName == 'KUNNRS|NAME1S') {
          element.initialValue = [this.rowData.KUNNRS, this.rowData.NAME1S];
        }
      });
      this.formList.find(x => x.fieldName === 'QAUART').itemList = this.orderTypeData.map(x => ({ text: x.partTypeName, value: x.partTypeId }));
    },
    // 初始化查询
    async initSearch() {
      let res = await getInvoiceList({
        VBELN: this.rowData.BVBELN,
        I_SVBELN: this.rowData.SVBELN
      });
      this.dataSource = [];
      this.dataSource = res.data;
    },
    // 上方表单
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '单据编号',
          fieldName: 'QVBELN',
          placeholder: '',
          initialValue: '',
          disabled: true
          // style: { width: '200px' },
          // rules: [
          //   { required: true, message: '请输入标题名称', trigger: 'blur' },
          //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          // ]
        },
        {
          type: 'DATE',
          label: '建立日期',
          fieldName: 'QERDAT',
          placeholder: '',
          initialValue: '',
          disabled: true
          // style: { width: '200px' },
          // rules: [
          //   { required: true, message: '请输入标题名称', trigger: 'blur' },
          //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          // ]
        },
        {
          type: 'INPUT',
          label: '净价值',
          fieldName: 'NETWR',
          placeholder: '',
          initialValue: '',
          disabled: true
          // style: { width: '200px' },
          // rules: [
          //   { required: true, message: '请输入标题名称', trigger: 'blur' },
          //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          // ]
        },
        {
          type: 'SELECT',
          label: '订单类型',
          fieldName: 'QAUART',
          placeholder: '',
          initialValue: '',
          itemList: this.orderTypeData,
          disabled: true
          // style: { width: '200px' },
          // rules: [
          //   { required: true, message: '请输入标题名称', trigger: 'blur' },
          //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          // ]
        },
        // {
        //   type: 'INPUT',
        //   label: '文化公司',
        //   fieldName: 'ARKTX',
        //   placeholder: '',
        //   initialValue: '',
        //   disabled: true
        // style: { width: '200px' },
        // rules: [
        //   { required: true, message: '请输入标题名称', trigger: 'blur' },
        //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ]
        // },
        {
          type: 'RANGE_INPUT',
          label: '售达方',
          fieldName: 'KUNNR|NAME1',
          // placeholder: '',
          initialValue: '',
          disabled: true
          // style: { width: '200px' },
          // rules: [
          //   { required: true, message: '请输入标题名称', trigger: 'blur' },
          //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          // ]
        },
        {
          type: 'INPUT',
          label: '采购订单号',
          fieldName: 'DHH',
          placeholder: '',
          initialValue: '',
          disabled: true
          // style: { width: '200px' },
          // rules: [
          //   { required: true, message: '请输入标题名称', trigger: 'blur' },
          //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          // ]
        },
        {
          type: 'RANGE_INPUT',
          label: '送达方',
          fieldName: 'KUNNRS|NAME1S',
          placeholder: '',
          initialValue: '',
          disabled: true
          // style: { width: '200px' },
          // rules: [
          //   { required: true, message: '请输入标题名称', trigger: 'blur' },
          //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          // ]
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          // width: 70,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '发票号',
          dataIndex: 'VBELN',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '项号',
          dataIndex: 'POSNR',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '服务站代码',
          dataIndex: 'KUNNR',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '配件号',
          dataIndex: 'MATNR',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '佣金组',
          dataIndex: 'PROVG',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '销售订单项目',
          dataIndex: 'ARKTX',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '实际已开票数量',
          dataIndex: 'FKIMG',
          sorter: true,
          filter: true,
          precision: 2,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '销售单位',
          dataIndex: 'VRKME',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '金额',
          dataIndex: 'NETWR',
          sorter: true,
          filter: true,
          precision: 2,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '税额',
          dataIndex: 'MWSBK',
          sorter: true,
          filter: true,
          precision: 2,
          filterType: 'input',
          showOverflowTooltip: true
        }
      ];
    },
    handleConfirm() {
      if (this.selectedTableData.length) {
        this.$emit('onConfirm', this.selectedTableData);
        this.handleCancle();
      } else {
        notifyAction('请选择库位', 'warning');
      }
    },
    handleCancle() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
